<template>
  <div class="table">
    <a-table
      v-bind="$props"
      v-on="$listeners"
      :pagination="pageOptions"
      :customRow="rowclick"
      :rowSelection="selection"
      @change="tabChange"
    >
      <div slot="expandedRowRender" slot-scope="text">
        <div class="expandedRender">
          <div class="label">发布内容：</div>
          <div class="content">
            <!-- 1文本 2 音频 3视频 4图片 只对接 1 2-->
            <template v-if="text.contentType === 1">
              <span>{{ text.content }}</span>
            </template>
            <template v-else-if="text.contentType === 2">
              <audio
                :ref="'audio_' + text.id"
                :src="text.content"
                controls="controls"
                @play="onPlay(text)"
                @ended="onEnded(text)"
              >
                您的浏览器不支持 audio 元素。
              </audio>
            </template>
            <template v-else>
              <span>--</span>
            </template>
          </div>
        </div>
        <div class="expandedRender">
          <template v-if="expandedRenderCxt">
            <a-table
              class="aTable"
              :columns="replyColumns"
              :data-source="innerData"
              :pagination="false"
            >
            </a-table>
          </template>
        </div>
      </div>
    </a-table>

    <div class="delete" v-if="pageInfo.total">
      <a-button
        v-if="!hideSelect"
        type="primary"
        :disabled="!selectedRowKeys.length"
        @click="$emit('deleteRows')"
        >删除</a-button
      >
      <span class="total">共计{{ pageInfo.total }}个</span>
    </div>
  </div>
</template>
<script>
import httpApi from "@/api/comment";

export default {
  props: {
    rowKey: String,
    scroll: Object,
    columns: Array,
    dataSource: Array,
    loading: Boolean,
    hideSelect: Boolean,
    hidePagination: Boolean,
    expandedRenderCxt: Boolean,
    expandedRowKeys: {
      type: Array,
      default: () => []
    },
    selectedRowKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      innerData: [
        {
          name: "ssh",
          source: "111",
          replyTime: "121212",
          content: "111111"
        }
      ],
      replyColumns: [
        {
          title: "回复人",
          width: 100,
          dataIndex: "name"
        },
        {
          title: "来源",
          dataIndex: "source"
        },
        {
          title: "回复时间",
          dataIndex: "replyTime"
        },
        {
          title: "回复内容",
          dataIndex: "content"
        },
        {
          title: "操作",
          customRender: (v, row) => {
            return (
              <div class="operate-td" v-auth="order.deleteReply">
                <a onClick={() => this.deleteReply(row)}>删除回复</a>
              </div>
            );
          }
        }
      ],
      rowSelectionOpt: {
        selectedRowKeys: [],
        onChange: (selectedKeys, selectedRows) => {
          this.rowSelectionOpt.selectedRowKeys = selectedKeys || [];
          this.$emit("selectChange", selectedKeys, selectedRows);
        },
        getCheckboxProps: (row) => ({
          props: {
            disabled: row.disabled || row.dealStatus
          }
        })
      },
      pageInfo: {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showQuickJumper: true,
        showSizeChanger: true
      }
    };
  },
  watch: {
    selectedRowKeys: {
      immediate: true,
      handler(list) {
        this.rowSelectionOpt.selectedRowKeys = list || [];
      }
    }
  },
  computed: {
    selection() {
      if (this.hideSelect) {
        return null;
      }
      return this.rowSelectionOpt;
    },
    pageOptions() {
      if (this.hidePagination) {
        return false;
      }
      return this.pageInfo;
    }
  },
  methods: {
    deleteReply(row) {
      // 删除回复
      this.$confirm({
        title: "删除回复",
        content: "是否立即删除回复？",
        onOk: () => {
          httpApi
            .back({
              intId: row.id
            })
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("删除回复成功！");
                this.$emit("change");
              } else {
                this.$message.error(res.msg || "删除回复失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "删除回复失败！");
            });
        },
        onCancel: () => {
          console.log("已取消删除回复操作");
        }
      });
    },
    onPlay(node) {
      //关闭上一个的播放&&上一个时间重置
      this.dataSource.forEach((item) => {
        if (item.contentType === 2 && node.id !== item.id) {
          let audio = this.$refs[`audio_${item.id}`];
          audio.pause();
          audio.currentTime = 0;
        }
      });
    },
    onEnded(node) {
      //播放完毕时间重置
      let audio = this.$refs[`audio_${node.id}`];
      audio.currentTime = 0;
    },
    tabChange(pageInfo) {
      this.pageInfo.current = pageInfo.current;
      this.pageInfo.pageSize = pageInfo.pageSize;
    },
    rowclick(record, index) {
      return {
        on: {
          click: () => {
            this.$emit("onClick", record, index);
          },
          dblclick: () => {}
        }
      };
    }
  }
};
</script>

<style lang="less" scoped>
.expandedRender {
  text-align: left;
  line-height: 34px;
  display: flex;
  .label {
    width: 80px;
    height: 34px;
  }
  .content {
    flex: 1;
    display: flex;
    align-items: center;
    i {
      color: @primary-color;
      font-size: 20px;
      margin-right: 8px;
      cursor: pointer;
    }
    audio {
      height: 34px;
      max-width: 280px;
    }
  }
}
.table {
  width: 100%;
  position: relative;
  .delete {
    width: 200px;
    padding: 0 18px;
    position: absolute;
    left: 0;
    bottom: 16px;
    .total {
      margin-left: 10px;
    }
  }
}
.aTable {
  margin-top: 10px;
}
</style>
